import React, { useEffect, useState } from "react"
import moment from "moment"
import { Picker, Switch, View, Text } from "@tarojs/components"
import { observer } from "mobx-react"
import http from "@/request"
import { ShowLoading, ShowToast } from "@/utils"
import { accountType } from "@/types"

import "./index.scss"

interface exportConfigType {
    startDate?: string,
    endDate?: string,
    time?: 1 | 3 | 0,
    type?: 0 | 1 | 2,
    hasNote?: boolean,
    accountId?: number,
    accountName?: string
}
const ExportFilter: React.FC<{onSuccess: () => void, account?: accountType}> = observer(({ onSuccess, account }) => {
    const [filterData, setFilterData] = useState<exportConfigType>({})

    useEffect(() => {
        setFilterData({
            startDate: moment().add(-1, 'months').format('YYYY-MM-DD'),
            endDate: moment().format('YYYY-MM-DD'),
            time: 1,
            type: 2,
            hasNote: true,
            accountId: account?.id,
            accountName: account?.name
        })
    }, [account])

    const filterChange = (val, key) => {
        if (key === 'startDate') {
            filterData.endDate = ''
        }
        if (key === 'time') {
            if (val === 1) {
                filterData.endDate = moment().format('YYYY-MM-DD')
                filterData.startDate = moment().add(-1, 'months').format('YYYY-MM-DD')
            } else if (val === 3) {
                filterData.endDate = moment().format('YYYY-MM-DD')
                filterData.startDate = moment().add(-3, 'months').format('YYYY-MM-DD')
            }
        }
        setFilterData({
            ...filterData,
            [key]: val
        })
    }

    const startExport = () => {
        ShowLoading()
        http.post('/export-import/export', {
            accountId: filterData.accountId,
            type: filterData.type,
            startDate: filterData.startDate,
            endDate: filterData.endDate,
            hasNote: filterData.hasNote ? 1 : 0
        }).then(() => {
            ShowToast('导出成功，请在导出记录中查看')
            onSuccess()
        }).catch(err => {
            ShowToast(err.msg || '导出失败')
        })
    }

    return (
        <View className="flex-column flex-item">
            <View className="filter-item">
                <View className="filter-item-title font-size28">交易类型</View>
                <View className="filter-btn-content flex-row">
                    <View className={`check-btn ${filterData.type === 2 ? 'active' : ''}`} onClick={() => filterChange(2, 'type')}>全部交易</View>
                    <View className={`check-btn ${filterData.type === 1 ? 'active' : ''}`} onClick={() => filterChange(1, 'type')}>收入</View>
                    <View className={`check-btn ${filterData.type === 0 ? 'active' : ''}`} onClick={() => filterChange(0, 'type')}>支出</View>
                </View>
            </View>
            <View className="filter-item">
                <View className="filter-item-title font-size28">时间范围</View>
                <View className="filter-btn-content flex-row">
                    <View className={`check-btn ${filterData.time === 1 ? 'active' : ''}`} onClick={() => filterChange(1, 'time')}>最近一个月</View>
                    <View className={`check-btn ${filterData.time === 3 ? 'active' : ''}`} onClick={() => filterChange(3, 'time')}>最近三个月</View>
                    <View className={`check-btn ${filterData.time === 0 ? 'active' : ''}`} onClick={() => filterChange(0, 'time')}>自定义</View>
                </View>
                {
                    !filterData.time ? <>
                        <View className="filter-selecter-content flex-row" style={{ marginTop: '20rpx' }}>
                            <View className="filter-item-label flex1">开始日期</View>
                            <Picker mode="date" fields="day" value={filterData.startDate || ''} onChange={(e) => filterChange(e.detail.value, 'startDate')}>
                                <View className="filter-item-val">
                                    {filterData.startDate || '请选择'}
                                    <Text className="iconfont icon-base-right"></Text>
                                </View>
                            </Picker>
                        </View>
                        <View className="filter-selecter-content flex-row">
                            <View className="filter-item-label flex1">截止日期</View>
                            <Picker mode="date" fields="day" value={filterData.endDate || ''} start={filterData.startDate} onChange={(e) => filterChange(e.detail.value, 'endDate')}>
                                <View className="filter-item-val">
                                    {filterData.endDate || '请选择'}
                                    <Text className="iconfont icon-base-right"></Text>
                                </View>
                            </Picker>
                        </View>
                    </> : null
                }
            </View>
            <View className="filter-item flex-row">
                <View className="filter-item-title font-size28 flex1">展示账单备注</View>
                <Switch className="switch" checked={filterData.hasNote} onChange={(e) => filterChange(e.detail.value, 'hasNote')} />
            </View>
            <View className="flex1"></View>
            <View onClick={startExport} className="export-start-btn border-main-color flex-row flex-center">
                <Text className="iconfont icon-xiazai"></Text>
                <Text>开始导出</Text>
            </View>
        </View>
    )
})

export default ExportFilter